<template>
	<view class="container">
		<view class="title">支付密码</view>
		<uni-forms :modelValue="form" label-width="100px" class="form-box">
			<uni-forms-item label="新密码">
				<uni-easyinput type="password" v-model="form.newpaymentPassword" placeholder="请输入新密码" />
			</uni-forms-item>
			<uni-forms-item label="确认密码">
				<uni-easyinput type="password" v-model="form.paymentPassword" placeholder="请再次输入密码" />
			</uni-forms-item>
			<uni-forms-item>
				<view class="button-group">
					<button type="primary" @click="submit" class="btn-submit">提交</button>
					<button type="default" @click="fanhui" class="btn-back">返回</button>
				</view>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		http
	} from '@/config/request.js';
	import {
		useuser
	} from '@/stores/user.js';

	const user = useuser();
	const form = ref({
		newpaymentPassword: '',
		paymentPassword: ''
	});

	const submit = async () => {
		if (!form.value.newpaymentPassword || !form.value.paymentPassword) {
			uni.showToast({
				title: '请输入完整信息',
				icon: 'none'
			});
			return;
		}

		if (form.value.newpaymentPassword !== form.value.paymentPassword) {
			uni.showToast({
				title: '两次输入密码不一致',
				icon: 'none'
			});
			return;
		}

		// 可根据需要加上6位数字限制校验
		if (!/^\d{6}$/.test(form.value.newpaymentPassword)) {
			uni.showToast({
				title: '密码须为6位数字',
				icon: 'none'
			});
			return;
		}

		const res = await http({
			url: '/xiugai',
			method: 'POST',
			data: {
				fid: user.user.id,
				paymentPassword: form.value.newpaymentPassword
			}
		});
		console.log(res);

		if (res.code === 20041) {
			uni.showToast({
				title: '设置成功',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} else {
			uni.showToast({
				title: res.message || '设置失败',
				icon: 'none'
			});
		}
	};

	const fanhui = () => {
		uni.navigateBack();
	};
</script>
<style scoped>
.container {
	padding: 40rpx;
	background-color: #f9f9f9;
	min-height: 100vh;
	box-sizing: border-box;
}

.title {
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
	color: #333;
}

.form-box {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.button-group {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.btn-submit {
	flex: 1;
	margin-right: 20rpx;
	background-color: #007aff;
	color: white;
	border-radius: 10rpx;
	font-size: 32rpx;
}

.btn-back {
	flex: 1;
	background-color: #eee;
	color: #333;
	border-radius: 10rpx;
	font-size: 32rpx;
}
</style>
